<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>align-items</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .box {
       
        width: 400px;
        height: 100px;
        margin: 100px auto 0;
        background: #89479B;

        /* flex布局 */
        /* 主轴排列 */
        display: flex; 

        /*align-items:定义项目在交叉轴的对齐方式。*/
        /*语法：align-items: flex-start | flex-end | center | baseline | stretch;*/
        /*1、flex-start：交叉轴的起点对齐。*/
        /* align-items: flex-start; */
        /*2、flex-end：交叉轴的终点对齐。*/
        /* align-items: flex-end; */
        /*3、center：交叉轴的中点对齐。*/
        /* align-items: center; */
        /*4、baseline: 项目的第一行文字的基线对齐。这里需要有文字才能看出效果，可自行添加文字进行查看效果*/
        /* align-items: baseline; */
        /*5、stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。*/
        /* align-items: stretch; 取消项目的高度 */


        /*结合之前的justify-content属性，就可以比较简单的解决传统布局的难题,垂直居中对齐的问题*/
		/*主轴上居中*/
        justify-content: center;
        /*交叉轴的中点对齐。*/
        align-items: center;
        
    }

    .item {
        width: 30px;
        background: lightblue;
    }

    .item:first-child {
        height: 50px;
        margin-right: 10px;
    }

    .item:nth-child(2) {
        height: 70px;
        margin-right: 10px;
    }

    .item:nth-child(3) {
        height: 30px;
        margin-right: 10px;
    }

    .item:last-child {
        height: 50px;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

</html>